<template>
  <div>
    <el-dialog
      :model-value="dialogAsync"
      width="30%"
      title="新建用户"
      :close-on-click-modal="false"
      :center="true"
      @open="openDialog"
      @close="closeDialog"
    >
      <div class="config-body">
        <el-form
          ref="ruleFormRef1"
          :model="data.ruleForm1"
          status-icon
          :rules="data.rules"
          label-width="auto"
          class="elform"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="data.ruleForm1.username"
              type="text"
              autocomplete="off"
              placeholder="请输入用户名"
            />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              v-model="data.ruleForm1.password"
              type="password"
              autocomplete="off"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="passwordConfirm">
            <el-input
              v-model="data.ruleForm1.passwordConfirm"
              type="password"
              autocomplete="off"
              placeholder="请再次输入密码"
            />
          </el-form-item>
          <el-form-item v-show="showRole" label="角色" prop="role">
            <el-select v-model="data.ruleForm1.role">
              <el-option
                label="管理员"
                value="管理员"
              />
              <el-option
                label="审计员"
                value="审计员"
              />
              <el-option
                label="操作员"
                value="操作员"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { req_getSystemRoleList, req_getTerminalRoleList } from "~/utils/axios/index.js";
const props = defineProps({
  dialogAsync: {
    type: Boolean,
    default: false,
  },
  name: {
    type: String,
  },
  showRole: {
    type: Boolean,
    default: true,
  },
});
const ruleFormRef1 = ref();

const validatePass = (rule, value, callback) => {
  if (data.ruleForm1.passwordConfirm !== "") {
    if (!ruleFormRef1.value) return;
    ruleFormRef1.value.validateField("passwordConfirm", () => null);
  }
  callback();
};
const validPassword = (rule, value, callback) => {
  var reg = /^(\w){8,20}$/;
  if (!reg.test(value)) {
    callback(new Error("密码只能输入8-20个字母、数字、下划线"));
  } else {
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (value !== data.ruleForm1.password) {
    callback(new Error("两次输入的密码不一致！"));
  } else {
    callback();
  }
};
const validcodeName = (rule, value, callback) => {
  var reg = /^[a-zA-Z]\w{2,15}$/;
  if (!reg.test(value)) {
    callback(new Error("账号必须是由字母开头3-16位数字和字母组合"));
  } else {
    callback();
  }
};
const roleOptions = ref([]);
const data = reactive({
  ruleForm1: {
    username: "",
    // oldPasswordHash: "",
    password: "",
    passwordConfirm: "",
    role: "管理员",
  },
  rules: {
    oldPasswordHash: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
    password: [
      { required: true, message: "密码不能为空", trigger: "blur" },
      // { validator: validatePass, trigger: "blur" },
      { min: 3, max: 24, message: "长度在 3 到 25 个字符", trigger: "blur" },
    ],
    passwordConfirm: [{ validator: validatePass2, trigger: "blur" }],
    username: [
      { required: true, message: "用户名不能为空", trigger: "blur" },
      { validator: validcodeName, trigger: "blur" },
    ],
  },
});

const emits = defineEmits(["closeDialog", "addTerminalUser", "setPassword"]);
const submit = () => {
  ruleFormRef1.value.validate((valid, fields) => {
    if (valid) {
      emits("addTerminalUser", data.ruleForm1);
      ruleFormRef1.value.resetFields();
    }
  });
};
const closeDialog = () => {
  ruleFormRef1.value.resetFields();
  emits("closeDialog", false);
};
</script>

<style lang="scss" scoped></style>
